<template>
  <el-container>
    <el-header class="header">
      <img src="@/assets/fangZi.png" alt>
      爱宠邦·后台管理系统
      <img
        src="@/assets/tuiChu.png"
        style="padding:13px;float: right;width: 29px;"
        @click="tuicu"
      >
      <span style="float:right">{{name}}</span>
    </el-header>
    <el-container>
      <el-aside width="200px" class="aside">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo menus"
          background-color="#324157"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <el-menu-item v-for="(item,index) in menus" v-bind:key="index" :index="item.router">
            <i class="iconfont imgg" :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
          <el-submenu index="5">
            <template slot="title">
              <i class="iconfont icon-tongji imgg"></i>
              <span>统计</span>
            </template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item index="/commoditysales">商品销售情况</el-menu-item>
              <el-menu-item index="/mendian.vue">全国门店分布图</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Cookies from "js.cookie";
export default {
  computed: {
    menus() {
      return this.$store.state.permission.menus;
    },
    name() {
      return this.$store.state.permission.loginUser.loginName;
    }
  },
  methods: {
    tuicu() {
      if (Cookies.get("userId")) {
        this.$confirm("确定要退出该用户吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "退出成功！",
              onClose: () => {
                this.$store.dispatch("permission/loginOut");
                Cookies.remove("userId");
                this.$router.push({
                  name: "登陆"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消退出！"
            });
          });
      }
    }
  }
};
</script>

<style scoped>
.imgg {
  font-size: 22px;
  padding: 0 7px 0 0;
}
.header {
  background-color: #242f42;
  color: white;
  line-height: 57px;
  font-size: 20px;
}
.aside {
  position: absolute;
  height: 100%;
  min-height: 100%;
  background-color: #324157;
}
.menu {
  background-color: #324157;
}
.main {
  margin-left: 210px;
}
</style>
